<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body,p,ul,li,input {
            margin:0;
            padding:0;
        }
        ul {
            list-style-type:none;
        }
        a {
            color:#fff;
            /* ouline:none; */
            text-decoration:none;
        }
        body {
            font:700 24px/1.5 Arial;
        }

        #calc {
            position:relative;
            background:black;
            width:300px;
            margin:10px auto;
        }
        #calc p {
            color:#fff;
            text-align:right;
            font:12px/20px Arial;
            padding:0 5px;
        }
        #calc .f-text {
            border:0;
            width:290px;
            height:84px;
            text-align:right;
            font:700 50px/84px Arial;
            background:grey;
            padding:0 5px;
        }


        #calc ul {
            position:relative;
            overflow:hidden;
            zoom:1;
            background:#A0A0A0FF;
            padding:0 0 17px 8px;
        }
        #calc ul li{
            float:left;
            width:63px;
            height:41px;
            margin:17px 10px 0 0;
        }
        #calc ul li a {
            display:block;
            width:63px;
            height:41px;
            line-height:41px;
            text-align:center;
            background:black;
        }

        #calc ul li.btn-2 {
            position:absolute;
            top:174px;
            right:0;
        }
        #calc ul li.btn-2 a {height:99px;line-height:99px;}

        #calc ul li.btn-3 {
            width:136px;
        }
        #calc ul li.btn-3 a {
            width:136px;
        }

        #formula {
            position:absolute;
            top:20px;
            background:none;
            border:0;
            font:700 12px/1.5 Arial;
            width:280px;
            padding:3px 15px 0 5px;
            text-align:right;
        }
    </style>
</head>
<body>
    <div id="calc">
        <p></p>
        <input type="text" class="f-text" readonly="readonly" maxlength="9" value="0" />
        <ul>
            <li class="btn-1"><a href="#">c</a></li>
            <li class="btn-1"><a href="#">%</a></li>
            <li class="btn-1"><a href="#">÷</a></li>
            <li class="btn-1"><a href="#">×</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li class="btn-1"><a href="javascript:void(0)">-</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li class="btn-1"><a href="javascript:void(0)">+</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li class="btn-2"><a href="#">=</a></li>
            <li class="btn-3"><a href="#">0</a></li>
            <li><a href="#">.</a></li>
        </ul>
        <input type="text" id="formula" readonly="readonly" value="" />
    </div>
</body>
</html>
<script>
    var oCalc = document.getElementById("calc");
    var aA = oCalc.getElementsByTagName("a");
    var aInput = oCalc.getElementsByTagName("input")[0];
    var oFormula = document.getElementById("formula");
    var s = false; /* 设置状态值控制功能按钮的功能启用/关闭 */
    /*var i = 0;*/
    /* 功能按钮 */
    for(var i=0;i<aA.length;i++) {
        aA[i].onclick = function() {
            switch(this.innerHTML) {
                case "c":
                    aInput.value = 0;
                    oFormula.value = "";
                    break;
                case "%":
                    count("%");
                    break;
                case "÷":
                    count("/");
                    break;
                case "×":
                    count("*");
                    break;
                case "-":
                    count("-");
                    break;
                case "+":
                    count("+");
                    break;
                case "=":
                /*s若为真，则不执行符号后的表达式；若为假，再执行后续表达式*/
                    s || (oFormula.value += aInput.value);
                    aInput.value = eval(oFormula.value.replace(/\%\/\*\-\+/,''));
                    s = true;
                    break;
                case ".":
                /*search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。*/
                    if(aInput.value.search(/[\.\%\/\*\-\+]/) != -1)
                    break;

                /* 匹配输入位数字的情况 */
                default:
                /*&&，前为真，才会执行符号后的表达式 */                        
                /* 增加s=true的判断，代表在计算结束之后，重新输入数字的同时，实现"c"的重置功能，此处console.log(s)显示s状态变化 */
                    s && (aInput.value = 0,oFormula.value = "",s = false);

                //  输入数字若满足小于10位，则执行后续表达式
                //  "[",标记一个中括号表达式的开始。 ()",标记一个子表达式的开始和结束位置。子表达式可以获取供以后使用。要匹配这些字符
                // ^[]，匹配范围从括号内的字符为开始字符
                // (\d),数字型字符
                // 总的意思，就是匹配  以中括号开头   的  数字字符 
                // $1,指的是匹配规则中的第一个小括号里的小正则捕获到的内容.
                // 如果我们将某一个按钮中的值改为字母，那么小正则只有用\D捕获到该字母，才会实现replace.
                    aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
            }
        }
    }

    function count(a) {
        /*s为true，也就是说，至少实现一次运算时，s会冲false变为true */
        /*s=true，是为了实现当做完一次计算，需要用到该计算值参与下次计算*/
        if(s){
            console.log(aInput.value)
            oFormula.value = aInput.value + a;
            aInput.value = a;
            s = false;
        }

        /* 因为s初始为false，则在此实现连续运算，在还未给出最终答案的时候 */
        else {
             // 符号前为假，则执行后面的表达式。   若为真，则不再执行符号后的运算 
             // []$,表示已括号内的字符结尾
            /[\%\/\*\-\+]$/.test(aInput.value) || (oFormula.value += aInput.value);                    
            aInput.value = a;

            // slice(-1):代表倒序第一位
            // .$:没有理解此处判断有什么用，其意可以理解为：
            /[\%\/\*\-\+]$/.test(oFormula.value) || (oFormula.value += aInput.value);
            oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value;

        }
    }
</script>